h1{
    font:400 40px 'pt sans',sans-serif;
    text-align:center;
  }
.nav a{
text-decoration:none;
}
.nav{
height:70px;
background:#0000cd;
position:relative;
z-index:6;
}
.nav>ul{
position:relative;
list-style:none;
padding:0;
margin:0;
}
.nav>ul>li>ul{
position:absolute;
left:0;
padding:0;
margin:0;
list-style:none;
}
.nav>ul>li:hover>ul li a{
opacity:1;
height:50px;
    transition:all .3s linear;
-o-transition:all .3s linear;
-moz-transition:all .3s linear;
-webkit-transition:all .3s linear;
}
.nav>ul>li>ul a{
display:block;
color:#222;
width:150px;
line-height:50px !important;
font:700 16px 'pt sans',sans-serif;
background:#eee;
border-bottom:1px solid #ddd;
text-align:center;
padding:0 5px;
height:0;
overflow:hidden;
opacity:0;
transition:all .3s linear .2s;
-o-transition:all .3s linear .2s;
-moz-transition:all .3s linear .2s;
-webkit-transition:all .3s linear .2s;
}
.nav>ul>li>ul a:hover{
display:block;
color:#222;
width:150px;
line-height:50px !important;
font:700 16px 'pt sans',sans-serif;
background:#A8D9FF;
border-bottom:1px solid #ddd;
text-align:center;
padding:0 5px;
height:0;
overflow:hidden;
opacity:0;
transition:all .3s linear .2s;
-o-transition:all .3s linear .2s;
-moz-transition:all .3s linear .2s;
-webkit-transition:all .3s linear .2s;
}
.nav>ul>li{
float:left;
position:relative;
}
.nav>ul>li>a{
padding:0 20px;
color:#fff;
display:block;
line-height:70px !important;
font:400 15px 'PT Sans', sans-serif;
text-decoration:none;
}

.lamp span{
display:block;
height:4px;
background:#ee6666;
position: relative;
}
.lamp span:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(238, 102, 102, 0);
border-bottom-color: #ee6666;
border-width: 4px;
margin-left: -4px;
}
.lamp{
position:absolute !important;
height:4px;
top:66px;
background:#333;
transition:all .3s linear;
-o-transition:all .3s linear;
-moz-transition:all .3s linear;
-webkit-transition:all .3s linear;
}
.selected.active>a,.active>a{
transition:all .3s linear;
-o-transition:all .3s linear;
-moz-transition:all .3s linear;
-webkit-transition:all .3s linear;
color:#fff;
}
.credit{
text-align:center;
margin:20px 0;
}
.blog-link{
color:#fff;
text-decoration:none;
background:#eee;
background-size:40px;
line-height:50px;
display:inline-block;
padding:0 10px;
border-radius:px;
border-bottom:3px solid #ddd;
color:#333;
font-family:'open sans',sans-serif;
margin:10px;
}
.dgithub{
color:#fff;
text-decoration:none;
background-size:40px;
line-height:50px;
display:inline-block;
padding:0 10px 0 50px;
background-position:5px;
border-radius:4px;
border-bottom:3px solid #ddd;
color:#333;
font-family:'open sans',sans-serif;
margin:10px;
}

#draw-border {
display: flex;
align-items: center;
justify-content: center;
}

view_item {
border: 1px solid;
background: none;
width: 300px;
text-transform: uppercase;
text-align:left;
color: #4361ee;
font-weight: bold;
position: relative;
outline: none;
padding: 10px 10px;
box-sizing: border-box;
border-radius: 8px;
cursor: pointer;
value: "";
}

view_item .hide_del_button {
float: right;
font-size: 15px;
font-family: helvetica;
color: red;
z-index:15;
display:none;
}

view_item::before, view_item::after {
box-sizing: inherit;
position: absolute;
content: '';
border: 2px solid transparent;
width: 0;
height: 0;
border-radius: 6px;
}
view_item::after {
bottom: 0;
right: 0;
}
view_item::before {
top: 0;
left: 0;
}
view_item:hover .hide_del_button {display:block;}
view_item:hover::before, view_item:hover::after {
width: 100%;
height: 100%;
}
view_item:hover::before {
border-top-color: #4361ee;
border-right-color: #4361ee;
transition: width 0s ease-out, height 0s ease-out 0s;
}
view_item:hover::after {
border-bottom-color: #4361ee;
border-left-color: #4361ee;
transition: border-color 0s ease-out 0s, width 0s ease-out 0s, height 0s ease-out 0s;
}

body { background: #f6f6f6;}

.btn {
width: 120px;
height: 40px;
display: inline-block;
//padding: 2px;
border-radius: 10px;
vertical-align: middle;
background: #0000cd;
//background: linear-gradient(268deg,#e3164e,#7f1ba7,#841c39,#e993e7,#d27228);
background-size: 1000% 1000%;
-webkit-animation: gradient 10s ease infinite;
-moz-animation: gradient 10s ease infinite;
-o-animation: Agradient 10s ease infinite;
animation: gradient 10s ease infinite;
}
.btn input {
font: 300 14px/14px 'Source Sans Pro',sans-serif;
letter-spacing: 1px;
display: block;
position: relative;
width: 100%;
height: 100%;
text-transform: uppercase;
background: #0000cd;
border: none;
outline: none;
border-radius: 10px;
color: #f6f6f6;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.645,0.045,0.355,1)
}
.btn:hover input {
background: transparent;
color: #f6f6f6;
letter-spacing: 1px;
outline: 1px;
background: #0000e7;
}

.btn-toggle-mx {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition: 0.8s all;
-o-transition: 0.8s all;
transition: 0.8s all
}
.btn-toggle-mx.transmx {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.progress {
height:20px;
background:#ebebeb;
border-left:1px solid transparent;
border-right:1px solid transparent;
border-radius:10px;
}
.progress > span {
position:relative;
float:left;
margin:0 -1px;
min-width:30px;
height:18px;
line-height:16px;
text-align:right;
background:#cccccc;
border:1px solid;
border-color:#bfbfbf #b3b3b3 #9e9e9e;
border-radius:10px;
background-image:-webkit-linear-gradient(top,#f0f0f0 0%,#dbdbdb 70%,#cccccc 100%);
background-image:-moz-linear-gradient(top,#f0f0f0 0%,#dbdbdb 70%,#cccccc 100%);
background-image:-o-linear-gradient(top,#f0f0f0 0%,#dbdbdb 70%,#cccccc 100%);
background-image:linear-gradient(to bottom,#f0f0f0 0%,#dbdbdb 70%,#cccccc 100%);
-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.2);
box-shadow:inset 0 1px rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.2);
}
.progress > span > span {
padding:0 8px;
font-size:9px;
font-weight:bold;
color:#404040;
color:rgba(0,0,0,0.7);
text-shadow:0 1px rgba(255,255,255,0.4);
}
.progress > span:before {
content:'';
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:1;
height:18px;
border-radius:10px;
}
.progress .green {
background:#85c440;
border-color:#78b337 #6ba031 #568128;
background-image:-webkit-linear-gradient(top,#b7dc8e 0%,#99ce5f 70%,#85c440 100%);
background-image:-moz-linear-gradient(top,#b7dc8e 0%,#99ce5f 70%,#85c440 100%);
background-image:-o-linear-gradient(top,#b7dc8e 0%,#99ce5f 70%,#85c440 100%);
background-image:linear-gradient(to bottom,#b7dc8e 0%,#99ce5f 70%,#85c440 100%);
}
.progress .blue {
background:#5aaadb;
border-color:#459fd6 #3094d2 #277db2;
background-image:-webkit-linear-gradient(top,#aed5ed 0%,#7bbbe2 70%,#5aaadb 100%);
background-image:-moz-linear-gradient(top,#aed5ed 0%,#7bbbe2 70%,#5aaadb 100%);
background-image:-o-linear-gradient(top,#aed5ed 0%,#7bbbe2 70%,#5aaadb 100%);
background-image:linear-gradient(to bottom,#aed5ed 0%,#7bbbe2 70%,#5aaadb 100%);
}

#popupmenu_project{
border:1px solid #ddd;
background: #eee;
position: absolute;
width: 200px;
height: 50px;
display: none;
z-index:8;
}
.popupmenu_project tr:hover{background:#A8D9FF;}

#popupmenu_dataset{
border:1px solid #ddd;
background: #eee;
position: absolute;
width: 200px;
height: 50px;
display: none;
z-index:8;
}
.popupmenu_dataset tr:hover{background:#A8D9FF;}

#popupmenu_task{
border:1px solid #ddd;
background: #eee;
position: absolute;
width: 200px;
height: 50px;
display: none;
z-index:8;
}
.popupmenu_task tr:hover{background:#A8D9FF;}

#popupmenu_model{
border:1px solid #ddd;
background: #eee;
position: absolute;
width: 200px;
height: 50px;
display: none;
z-index:8;
}
.popupmenu_model tr:hover{background:#A8D9FF;}

.scroll-content{
height: 220px;
}

.table-parms-head{padding-right:17px;background-color:#999;color:#000;}
.table-parms-head table,.table-body table{width:100%;}
.table-parms-body{width:100%; height:210px;overflow-y:scroll;}
.table-parms-body table tr:nth-child(2n+1){background-color:#f2f2f2;}

.table-dataset-labels{width:100%; height:210px; border:1px solid #D6D6D6; overflow-y:scroll; padding:0px 0px;}
.table-dataset-labels table tr:nth-child(2n){background-color:#f2f2f2; padding:0px 0px;}
.table-dataset-labels table td{border:solid #f2f2f2; border-width:0px 1px 1px 0px; padding:0px 0px;}

.table-dataset-imgs{width:100%; height:210px; border:1px solid #D6D6D6; overflow-y:scroll;}

arrow {
border: solid blue;
border-width: 0 6px 6px 0;
display: inline-block;
padding: 10px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}

a:link{
color:#000000;
text-decoration:none;}
a:visited{
color:#000000;
text-decoration:none;}
a:hover{
color:#0433FF;
text-decoration:none;}
a:active{
color:#000000;
text-decoration:none;}